// group 商管 的租赁状况的三个tab 
<template>
  <div class="home-chart-box">
    <el-table :border="false" :data="tableData" max-height="390" stripe>
      <el-table-column align="center" label="项目名称" prop="xiangmumingcheng"></el-table-column>

      <template v-if="pageType == 'leaseSpace'">
        <el-table-column align="center" label="已租赁面积" prop="qianfei"></el-table-column>
        <el-table-column align="center" label="可租赁面积" prop="baozhengjin"></el-table-column>
        <el-table-column align="center" label="出租比例">
          <template slot-scope="scope">
            <el-progress type="line" :percentage="scope.row.bili" :color="scope.row.yanse"></el-progress>
          </template>
        </el-table-column>
      </template>

      <template v-if="pageType == 'leasePlane'">
        <el-table-column align="center" label="已租赁数量" prop="qianfei"></el-table-column>
        <el-table-column align="center" label="可租赁数量" prop="baozhengjin"></el-table-column>
        <el-table-column align="center" label="出租比例">
          <template slot-scope="scope">
            <el-progress type="line" :percentage="scope.row.bili" :color="scope.row.yanse"></el-progress>
          </template>
        </el-table-column>
      </template>

      <template v-if="pageType == 'commercialIncome'">
        <el-table-column align="center" label="可租赁面积" prop="baozhengjin"></el-table-column>
        <el-table-column align="center" label="建筑面积" prop="qianfei"></el-table-column>
        <el-table-column align="center" label="空间使用比例">
          <template slot-scope="scope">
            <el-progress type="line" :percentage="scope.row.bili" :color="scope.row.yanse"></el-progress>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import { apiViewOperateCapture } from '@a/index';

  export default {
    name: 'capture',
    props: {
      //类型 leaseSpace:空间出租率 leasePlane:广告位出租率 commercialIncome:空间使用率
      pageType: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        tableData: [
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府', yanse: '' },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 35, qianfeishichang: 12, xiangmumingcheng: '万国府', yanse: '' },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 75, qianfeishichang: 12, xiangmumingcheng: '万国府', yanse: '' },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府', yanse: '' },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府', yanse: '' },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府', yanse: '' },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府', yanse: '' },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府', yanse: '' },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府', yanse: '' },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府', yanse: '' },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府', yanse: '' },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府', yanse: '' },
          { shangpu: '肯德基', qianfei: '1000', baozhengjin: '200', bili: 15, qianfeishichang: 12, xiangmumingcheng: '万国府', yanse: '' },
        ],
      };
    },

    mounted() {
      console.log(99);
      this.getSource();
    },

    methods: {
      async getSource() {
        // let res = await apiViewOperateCapture()
        // this.tableData = res.rows || []
        this.tableData.forEach(item => {
          if (item.bili > 0 && item.bili < 33) {
            item.yanse = '#3384FE';
          } else if (item.bili >= 33 && item.bili < 66) {
            item.yanse = '#F79100';
          } else {
            item.yanse = '#FF0000';
          }
        });
      },
    },
  };
</script>

<style lang="scss" scoped></style>
